<template>
    <div class="clear-float">
        <header style="position: relative">
            <div class="sub-title">
                <div class="sub-text">各地区各分类交易额统计图</div>
                <p class="sub-text-en">Statistics of transaction volume by region and by category</p>
            </div>
        </header>
        <Row>
            <Col span="12" v-for="(item,index) in turnoverOptions" :key="index">
                <div class="clear-float" style="position: relative">
                    <v-chart style="width: 100%;height: 250px"  :options="item.Options"></v-chart>
                    <img class="bg-charts" :src="yuan">
                    <span class="label-address">{{item.name}}</span>
                </div>
            </Col>
        </Row>
    </div>

</template>
<script>
    import yuan from '@/assets/images/yuan.svg'
    export default {
        name:'turnover',
        components: {
        },
        props: {
        },
        data () {
            return {
                yuan,
                turnoverOptions:[{name:'',Options:{}},{name:'',Options:{}},{name:'',Options:{}},{name:'',Options:{}}],
                address:['铜仁市','黔东南州','遵义市','六盘水市'],
                Options:{
                    legend: {
                        x: 'left',
                        itemWidth:10,
                        itemHeight:10,
                        top:20,
                        textStyle:{
                            color:'#9590C5'
                        },
                        data:['肉类','蔬菜','米','粮油','瓜类','其他']
                    },
                    grid:{
                        left:20,
                        top:60,
                        bottom:10
                    },
                    tooltip:{
                        formatter:'<div style="padding: 3px"><div style="text-align: left;margin: 3px auto;"></div>{b}:{c} ({d}%)</div>',
                    },
                    series: {
                        data: [{
                            name:'肉类',
                            value:0,
                            itemStyle:{
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#52FFF9' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#54FFB2' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                }
                            }

                        },
                            {
                                name:'蔬菜',
                                value:0,
                                itemStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#F1910E' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#FCC700' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                },
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    }
                                }
                            },
                            {
                                name:'米',
                                value:0,
                                itemStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#D2F330' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#53CC79' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                },
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    }
                                }
                            },
                            {
                                name:'粮油',
                                value:0,
                                itemStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#26C5FF' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#167EDB' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                },
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    }
                                }
                            },
                            {
                                name:'瓜类',
                                value:0,
                                itemStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#26C5FF' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#167EDB' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                },
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    }
                                }
                            },
                            {
                                name:'其他',
                                value:0,
                                itemStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#26C5FF' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#167EDB' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                },
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
//                                    emphasis: {
//                                        show: true,
//                                        textStyle: {
//                                            fontSize: '30',
//                                            fontWeight: 'bold'
//                                        },
//                                        formatter:function( data ) {
//                                            return '{white|' + data.value + '}'+'\n'+'{gray|'+data.name+'}';
//                                        },
//                                        rich: {
//                                            white: {
//                                                color: '#fff',
//                                                fontSize:30
//                                            },
//                                            gray: {
//                                                color: '#86868F',
//                                                fontSize:16,
//                                            }
//                                        }
//                                    }
                                }
                            }
                        ],
                        type: 'pie',
                        smooth: true,
                        label:{
                            show:false
                        },
                        labelLine:{
                            show:false
                        },
                        radius:['65%','75%'],
                        center:['50%','62%']
                    }
                },
//                数组数据值顺序分别是：铜仁市、黔东南州、遵义市、六盘水市
                turnoverData:{
                    tongren:[35,26,14,26,23,12],
                    qdn:[12,36,45,86,23,12],
                    zunyi:[12,0,35,12,23,12],
                    lps:[42,12,0,45,23,12],
                },
                isActive:0
            }
        },
        computed: {
        },
        methods: {
            setOptions(){
                let _this=this;
                for(let i=0;i<4;i++){
                    this.turnoverOptions[i].Options=this.Options;
                    this.turnoverOptions[i].name=this.address[i];
                }

                console.log(this.turnoverOptions)
                for(let j=0;j<4;j++){
                    this.turnoverData.tongren.forEach(function (val,inde) {
                        _this.turnoverOptions[j].Options.series.data[inde].value=val;
                    })
                    console.log(this.turnoverOptions[j])
                }
            },
            initCharts(){
               this.setOptions()
            }
        },
        mounted () {
//            this.setOptions()
            this.initCharts()
        },
        created(){
        }
    }

</script>
<style>
    /**
     * The default size is 600px×400px, for responsive charts
     * you may need to set percentage values as follows (also
     * don't forget to provide a size for the container).
     */
    /*.echarts {*/
    /*width: 100%;*/
    /*height: 150px;*/
    /*}*/
</style>